"use client"
import Icon from '@/components/common/icon'
import MyButton from '@/components/form/my-button'
import MyInput from '@/components/form/my-input'
import { MyModal, MyModalTrigger, MyModalContent, MyModalHeader, MyModalFooter } from '@/components/form/my-modal'
import MySelect from '@/components/form/my-select'
import { Button } from '@/components/ui/button'
import { FormField, FormItem, FormLabel, FormControl, FormDescription, FormMessage } from '@/components/ui/form'
import { Input } from '@/components/ui/input'
import { FaArrowsRotate, FaFilter, FaMagnifyingGlass } from "react-icons/fa6";

import { zodResolver } from "@hookform/resolvers/zod"
import { useState } from 'react'
import { Form, FormProvider, useForm } from "react-hook-form"
import { z } from "zod"
import { X } from 'lucide-react'

const formSchema = z.object({
  username: z.string(),
  username2: z.array(z.string()),
})

const FilterSearchForm = ()=>{
  return <>
    内部筛选
  </>
}

const ExternalSearchForm = ()=>{
  const [val1, setVal1] = useState('')

  const form = useForm<z.infer<typeof formSchema>>({
    resolver: zodResolver(formSchema),
    defaultValues: {
      username: "",
      username2: []
    },
  })
  function onSubmit(values: z.infer<typeof formSchema>) {
    console.log(values)
  }

  return <FormProvider {...form}>
    {/* 完整筛选 按钮 */}
   
    <form onSubmit={form.handleSubmit(onSubmit)} className='flex flex-wrap gap-card-gap-x'>
      <MyModal>
        <MyModalTrigger>
          <MyButton>
            全部筛选项
            <Icon icon={FaFilter} />
          </MyButton>
        </MyModalTrigger>
        <MyModalContent>
          <MyModalHeader>
            筛选
          </MyModalHeader>
            <FilterSearchForm />
          <MyModalFooter>
            <MyButton variant='secondary'>确定</MyButton>
          </MyModalFooter>
        </MyModalContent>
      </MyModal>
      
      <FormField
        control={form.control}
        name="username"
        render={({ field }) => (
          <FormItem>
            <MyInput placeholder='brand' />
            <FormMessage />
          </FormItem>
        )}
      />
      <FormField
        control={form.control}
        name="username"
        render={({ field }) => (
          <FormItem>
            <MyInput placeholder='brand' />
            <FormMessage />
          </FormItem>
        )}
      />

      <FormField
        control={form.control}
        name="username"
        render={({ field }) => (
          <FormItem>
            <MySelect placeholder='Test info' header="测试内容" options={[
              {label: 'Test1', value: 'test1'},
              {label: 'Test2', value: 'test2'},
              {label: 'Test3', value: 'test3'},
              {label: 'Test4', value: 'test4'},
              {label: 'Test5', value: 'test5'},
              {label: 'Test6', value: 'test6'},
              {label: 'Test7', value: 'test7'},
            ]} {...field} />
            <FormMessage />
          </FormItem>
        )}
      />

      {/* <FormField
        control={form.control}
        name="username2"
        render={({ field }) => (
          <FormItem>
            <MySelect multiple placeholder='Test info' header="测试内容" options={[
              {label: 'Test1', value: 'test1'},
              {label: 'Test2', value: 'test2'},
              {label: 'Test3', value: 'test3'},
              {label: 'Test4', value: 'test4'},
              {label: 'Test5', value: 'test5'},
              {label: 'Test6', value: 'test6'},
              {label: 'Test7', value: 'test7'},
            ]} {...field} />
            <FormMessage />
          </FormItem>
        )}
      /> */}
      
      <MyButton variant={'secondary'}>
        <Icon icon={FaArrowsRotate} />
        重置
      </MyButton>
      <MyButton>
        <Icon icon={FaMagnifyingGlass} />
        搜索
      </MyButton>
    </form>
  </FormProvider>
}

const CarSearchForm = () => {
  return (
    <div>
      {/* 外部筛选表单 */}
      <ExternalSearchForm />
    </div>
  )
}

export default CarSearchForm